<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
const config = reactive({
  header: ['区域名称', '库区数量', '库位数量','商品数量','库位使用率'].map((content)=>{
    return '<div class="scrollBoardCell" style="font-size:11px;color:rgb(150,179,216)">' + content +'</div>'
  }),
  headerBGC:'rgb(31,61,119)',
  headerHeight: 27,
  data: [
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
    ['一楼立库区','212','983','721','90%'],
  ].map((item)=>{
    return item.map((content)=>{
        return '<div style="color:rgb(150,179,216);font-size:12px;text-align:center;">' + content + '</div>'
    })
  }),
  index: false,
  columnWidth: [80,56,56,56,65],
  align: ['center','center','center','center','center'],
  oddRowBGC: 'rgb(20,35,72)',
  evenRowBGC: 'rgb(18,28,61)',
  rowNum: 5
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}

onMounted(()=>{
})

</script>

<template>
    <div class="full-w">
        <SepTitle title="库区库位统计">
            <template #main>
                <div class="librarySectionStatisticsMain">
                    <dv-scroll-board ref="scrollBoard" :config="config" class="scrollBoard" @mouseover="mouseoverHandler" @click="clickHandler" />
                </div>
            </template>
        </SepTitle>
    </div>
</template> 

<style>
.librarySectionStatisticsMain .ceil {
  position: relative;
  padding: 0 !important;
}

.librarySectionStatisticsMain .ceil :after {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  z-index :999;
  background-color: rgb(28,47,96);
  width: 1px;
  height: 100%;
  display: block;
}

.librarySectionStatisticsMain .ceil:first-of-type {
  flex-grow: 1 !important;
}

.librarySectionStatisticsMain .header-item {
  position: relative;
  padding: 0 !important;
}

.librarySectionStatisticsMain .header-item:first-of-type {
  flex-grow: 1 !important;
}

.librarySectionStatisticsMain .header-item :after {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  z-index :999;
  background-color: rgb(28,47,96);
  width: 1px;
  height: 100%;
  display: block;
}
</style>

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
.librarySectionStatisticsMain 
    width 100%
    height 170px

.scrollBoard
    width 100%
    height 100%
    box-sizing border-box;
</style>

